<template>
  <BasicModal @register="register" :title="title" @ok="handleSubmit">
    <div v-if="title == '年初始化'" style="margin-top: 20px; text-align: center">
      <a-date-picker v-model:value="value" picker="year" valueFormat="YYYY" />
      <p style="color: red; text-align: center; margin-top: 10px">提示：格式-eg:2022</p>
    </div>
    <div v-else style="margin-top: 20px; text-align: center">
      <a-date-picker v-model:value="value" picker="month" valueFormat="YYYY-MM" />
      <p style="color: red; text-align: center; margin-top: 10px">提示：格式-eg:2022-02</p>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'WorkCalendarModal',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { initCalendar } from '/@/api/bas/calendar';
  import { useMessage } from '/@/hooks/web/useMessage';
  const emit = defineEmits(['success', 'register']);
  const { showMessage } = useMessage();
  const [register, { closeModal }] = useModalInner((e) => {
    title.value = e;
  });
  let title = ref<string>('');
  let value = ref<string>('');
  async function handleSubmit() {
    let data = {
      type: title.value == '年初始化' ? 'Y' : 'M',
      date: value.value,
    };
    const res = await initCalendar(data);
    showMessage(res.message);
    setTimeout(closeModal);
    emit('success')
  }
  
</script>
<style scoped>
  .ant-picker {
    width: 80%;
  }
</style>
